<?php
/**
 * index.php
 * @abstract SudokuMatrix example index.php
 * @author Manel Zaera (manelzaera@gmail.com)
 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL
 *
 * Changes:
 * 2008-01-05, Manel Zaera (manelzaera@gmail.com), First version
 * 2008-01-10, Manel Zaera (manelzaera@gmail.com), Help mode on/off
 */

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title>Sudoku</title>
<script type="text/javascript" src="prototype.js">
</script>

<script type="text/javascript">
	// Cell content change event
    var cellChange = function(e){
    	var parts = (this.id).split('_');
        var row = parts[1];
        var col = parts[2];
        $('helpdata').innerHTML = '';
        setCellAjax('sudokufrm.php',$(this.id).value,row,col);
    }

	// Cell content change AJAX updater
    function setCellAjax(url,value,row,col) {
        if ((value >=0 && value<=9) || (value=='')) {
        	if (value=='') {
        		value = 0;
        	}
        	var ajaxReq = new Ajax.Request(url,{method:'post',parameters:'action=set&row='+row+'&col='+col+'&value='+value,onComplete: setCellAjaxResponse});
         } else {
			$('m_'+row+'_'+col).value = '';
         }
    }

	// Cell change AJAX updater response
    function setCellAjaxResponse(originalRequest) {
        if (originalRequest.responseText != '1') {
            $('result').innerHTML = 'Error, some number is wrong';
        } else {
            $('result').innerHTML = '';
            checkCompleteAjax();
        }
    }

	// Check if Sudoku is complete
    function checkCompleteAjax() {
    	var url = 'sudokufrm.php';
    	var ajaxReq = new Ajax.Request(url,{method:'post',parameters:'action=complete',onComplete:checkCompleteAjaxResponse});
    }

	// Check Sudoku completion response
    function checkCompleteAjaxResponse(request) {
    	if (request.responseText == '1') {
    		$('result').innerHTML = 'Congratulations! You got it!';
    	}
    }

	// Window load event
	var onLoad = function(e) {
		newSudoku('easy',false);
	}

	// Create new Sudoku
    function newSudoku(level,reset) {
    	var values = '';
    	if (reset==true) {
    		values=$('originalvalues').value;
    	}
        var ajaxReq = new Ajax.Request('sudokufrm.php',{method: 'post',parameters:'action=new&level='+level+'&values='+values,onComplete: newSudokuResponse});
    }

	// Create new Sudoku response
    function newSudokuResponse(originalRequest) {
        $('sudokuvalues').value = originalRequest.responseText;
        $('originalvalues').value = originalRequest.responseText;
        putValuesIntoTable($('sudokuvalues').value);
    }

	// Init table values
    function putValuesIntoTable(values) {
        var cells = values.split(",");
        var cell = 0;
        var i = 0;
        var j = 0;
        while (i<9) {
        	j = 0;
        	while (j<9) {
                setTableCell(i,j,cells[cell++]);
                j++;
            }
            i++;
        }
    }

	// Set a table cell content
    function setTableCell(row,col,value) {
        var id = 'imgm_'+row+'_'+col;
        if (value == 0) {
        	img = 'blank.png';
    		Event.observe('m_'+row+'_'+col,"click",cellSelect);
    		Event.observe('m_'+row+'_'+col,"keypress",keyPress);
        } else {
        	// Fixed cells are marked with a special image
        	img = 'cell'+value+'_fixed.png';
        }
        $(id).src = img;
    }

	// On key presses event
	var keyPress = function(e) {
		var number = e.charCode-48;
		var img = '';
		if (number >= 1 && number <= 9) {
			img = 'cell'+number+'.png';
		} else {
			number = 0;
			img = 'blank.png';
		}
		var id = $('selectedcell').value;
		$('img'+id).src = img;
		changeCell(number);
	}

	// Change a cell content
	function changeCell(number) {
		var id = $('selectedcell').value;
		var parts = id.split('_');
        var row = parts[1];
        var col = parts[2];
        setCellAjax('sudokufrm.php',number,row,col);
	}

	// Cell selection event
	var cellSelect = function(e) {
		$('selectedcell').value = this.id;
		$('helpdata').innerHTML = '';
		if ($('helpmode').value=='on' && $('img'+this.id).src.indexOf('blank.png')!=-1) {
			showHelp($('selectedcell').value);
		}
	}

	function showHelp(number) {
		var id = $('selectedcell').value;
		var parts = id.split('_');
        var row = parts[1];
        var col = parts[2];
        showValidValuesAjax('sudokufrm.php',row,col);
	}

	// Show valid values AJAX updater
    function showValidValuesAjax(url,row,col) {
        var ajaxReq = new Ajax.Request(url,{method:'post',parameters:'action=validv&row='+row+'&col='+col,onComplete: showValidValuesAjaxResponse});
    }

	// Show valid values AJAX updater response
    function showValidValuesAjaxResponse(originalRequest) {
    	$('helpdata').innerHTML = 'Valid values: '+originalRequest.responseText;
    }

	// New game click event
	var newgame_sellevel = function(e) {
		$('newgame').show();
	}

	// New game confirmation event
	var newgame = function(e) {
		$('newgame').hide();
		$('result').innerHTML = '';
		newSudoku($('newgame_level').value,false);
	}

	// Reset game matrix
	var resetgame = function(e) {
		if (confirm('Are you sure?')) {
			$('result').innerHTML = '';
			newSudoku('easy',true);
		}
	}

	// Change to help mode on/off
	var changeHelpMode = function(e) {
		var mode = ($('helpmode').value=='on')?'off':'on';
		$('helpmode').value = mode;
		if (mode == 'on') {
			$('helpmodelink').title = 'Help mode on';
			$('helpmodelink').innerHTML = 'Help mode on';
		} else {
			$('helpmodelink').title = 'Help mode off';
			$('helpmodelink').innerHTML = 'Help mode off';
			$('helpdata').innerHTML = '';
		}
	}
	Event.observe(window,'load',onLoad);
</script>
</head>
<body>
<form id="sudokuform" name="sudokuform" method="POST" action="">
<p>
<a href="#" title="New Sudoku" id="newgame_link">New Sudoku</a>
<a href="#" title="Reset game" id="resetgame_link">Reset game</a>
<div id="newgame" style="display:none">
Level: <select id="newgame_level" name="newgame_level">
<option value="easy" selected="yes">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
<option value="expert">Expert</option>
</select>
<br/>
<input type="button" id="newgame_ok" name="newgame_ok" value="Accept"/>
<br/>
<script type="text/javascript">
Event.observe('newgame_link','click',newgame_sellevel);
Event.observe('newgame_ok','click',newgame);
Event.observe('resetgame_link','click',resetgame);
</script>
</div>
<a href="#" id="helpmodelink" title="Help mode off">Help mode off</a>
<input type="hidden" id="helpmode" name="helpmode" value="off"/>
<script type="text/javascript">
Event.observe('helpmodelink','click',changeHelpMode);
</script>
<div id="helpdata"></div>
</p>
<input type="hidden" id="sudokuvalues" name="sudokuvalues" value=""/>
<input type="hidden" id="selectedcell" name="selectedcell" value=""/>
<input type="hidden" id="originalvalues" name="originalvalues" value=""/>

<table id="sudokutable" cellspacing="0" cellpadding="0" border="3px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=0;$i<3;$i++) {?>
<tr>
<?for($j=0;$j<3;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=0;$i<3;$i++) {?>
<tr>
<?for($j=3;$j<6;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=0;$i<3;$i++) {?>
<tr>
<?for($j=6;$j<9;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=3;$i<6;$i++) {?>
<tr>
<?for($j=0;$j<3;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=3;$i<6;$i++) {?>
<tr>
<?for($j=3;$j<6;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=3;$i<6;$i++) {?>
<tr>
<?for($j=6;$j<9;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=6;$i<9;$i++) {?>
<tr>
<?for($j=0;$j<3;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=6;$i<9;$i++) {?>
<tr>
<?for($j=3;$j<6;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0" border="1px">
<? for($i=6;$i<9;$i++) {?>
<tr>
<?for($j=6;$j<9;$j++) {?>
<td>
<a href="#" id="m_<?=$i.'_'.$j?>" name="m_<?=$i.'_'.$j?>"><img src="blank.png" border="0" id="imgm_<?=$i.'_'.$j?>" name="imgm_<?=$i.'_'.$j?>"/></a>
 </td>
<?}?>
</tr>
<?}?>
</table>
</td>
</tr>
</table>
</form>
<br/>
<div id="result"></div>
<hr/>
This example and SudokuMatrix are free software released under the <a href="http://www.gnu.org/copyleft/gpl.html" title="GPL text">GNU GPL</a> license.<br/>
AJAX and Javascript event handling thanks to <a href="http://www.prototypejs.org/" title="Prototype JS">Prototype Javascript Framework</a>, released under a MIT-style license.
</body>
</html>

